<template>
  <div class="dispatch-task-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <el-icon class="title-icon">
              <Clock />
            </el-icon>
            调度任务管理
          </h1>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <div class="stat-number">{{ pagination.total }}</div>
            <div class="stat-label">待调度任务</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 任务列表 -->
    <div class="task-section">
      <el-card class="main-card" shadow="never">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <h3 class="card-title">
                <el-icon>
                  <List />
                </el-icon>
                未调度任务列表
              </h3>
              <!-- <el-tag type="info" size="small">{{ pagination.total }} 条记录</el-tag> -->
            </div>
            <div class="header-actions">
              <el-button type="primary" @click="handleRefresh" :icon="Refresh" class="refresh-btn">
                刷新数据
              </el-button>
            </div>
          </div>
        </template>

        <div class="table-container">
          <el-table :data="tableData" v-loading="loading" stripe class="modern-table">
            <el-table-column prop="reportNo" label="报案号" width="210" align="center">
              <template #default="scope">
                <span>{{ scope.row.reportNo }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="policyId" label="保单编号" width="180" align="center">
              <template #default="scope">
                <span class="policy-id">{{ scope.row.policyId }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="disasterLocation" label="查勘地点" width="auto" show-overflow-tooltip>
              <template #default="scope">
                <div class="address-cell">
                  <el-icon class="location-icon">
                    <Location />
                  </el-icon>
                  <el-tooltip :content="scope.row.disasterLocation || '未设置查勘地点'" placement="top"
                    :disabled="!scope.row.disasterLocation" :show-after="300">
                    <span>{{ scope.row.disasterLocation || '未设置' }}</span>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="workOutStatus" label="外包调度" width="140" align="center">
              <template #default="scope">
                <el-tag :type="scope.row.workOutStatus === 1 ? 'success' : 'danger'">
                  {{ scope.row.workOutStatus === 1 ? '已分配' : '未分配' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="reportTime" label="报案时间" width="180" align="center">
              <template #default="scope">
                <span class="time-text">{{ formatDateTime(scope.row.reportTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="150" align="center">
              <template #default>
                <el-tag type="warning">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  待调度
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="180" fixed="right" align="center">
              <template #default="scope">
                <div class="action-buttons" v-if="scope.row.reportStatus == 1 && scope.row.workOutStatus == 0">
                  <el-button type="primary" size="small" @click="handleAssign(scope.row)" :icon="User"
                    class="action-btn assign-btn">
                    安排查勘员
                  </el-button>
                </div>
                <div class="action-buttons" v-if="scope.row.reportStatus
                  != 1 && scope.row.workOutStatus == 0">
                  <el-button type="primary" size="small" @click="handleAssign(scope.row, true)" :icon="User"
                    class="action-btn assign-btn">
                    安排外包查勘员
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-section">
          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
            :page-sizes="[5, 10, 20, 50, 100]" :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" class="modern-pagination" />
        </div>
      </el-card>
    </div>

    <!-- 安排查勘员对话框 -->
    <el-dialog v-model="assignDialogVisible" :title="isOutsource ? '安排外包查勘员' : '安排查勘员'" width="1000px"
      class="assign-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
      <template #header>
        <div class="dialog-header">
          <div class="header-left">
            <el-icon class="dialog-icon">
              <User />
            </el-icon>
            <span class="dialog-title">{{ isOutsource ? '安排外包查勘员' : '安排查勘员' }}</span>
          </div>=
        </div>
      </template>

      <div class="dialog-content">
        <el-form ref="assignFormRef" :model="assignForm" :rules="assignRules" label-width="120px" class="assign-form">
          <!-- 基本信息 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon>
                <Document />
              </el-icon>
              <span>基本信息</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="报案编号">
                  <el-input v-model="assignForm.reportId" disabled class="disabled-input">
                    <template #prefix>
                      <el-icon>
                        <Document />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保单编号">
                  <el-input v-model="assignForm.policyId" disabled class="disabled-input">
                    <template #prefix>
                      <el-icon>
                        <CreditCard />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报案时间">
                  <el-input :value="formatDateTime(assignForm.reportTime)" disabled class="disabled-input">
                    <template #prefix>
                      <el-icon>
                        <Clock />
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 调度信息 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon>
                <Location />
              </el-icon>
              <span>调度信息</span>
            </div>
            <!-- class="modern-input" -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="查勘地点" prop="surveyAddress">
                  <el-tooltip :content="assignForm.surveyAddress || '请输入查勘地点'" placement="top"
                    :disabled="!assignForm.surveyAddress" :show-after="500">
                    <el-input v-model="assignForm.surveyAddress" placeholder="请输入查勘地点" class="modern-input">
                      <template #prefix>
                        <el-icon>
                          <Location />
                        </el-icon>
                      </template>
                    </el-input>
                  </el-tooltip>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="计划时间" prop="scheduledStartTime">
                  <el-date-picker v-model="assignForm.scheduledStartTime" type="datetime" placeholder="请选择计划开始时间"
                    class="modern-datepicker" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 人员安排 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon>
                <User />
              </el-icon>
              <span>人员安排</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="调度员" prop="dispatcherWorkNo">
                  <el-select v-model="assignForm.dispatcherWorkNo" placeholder="请选择调度员" class="modern-select">
                    <el-option v-for="dispatcher in dispatcherOptions" :key="dispatcher.workNo"
                      :label="`${dispatcher.realName} (${dispatcher.workNo})`" :value="dispatcher.workNo">
                      <div class="surveyor-option">

                        <div class="surveyor-info">
                          <div class="surveyor-name">{{ dispatcher.realName }}({{
                            dispatcher.workNo }})</div>

                        </div>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- class="modern-select" -->
              <el-col :span="12">
                <el-form-item :label="isOutsource ? '外包查勘员' : '查勘员'" prop="surveyorWorkNo">
                  <el-select v-model="assignForm.surveyorWorkNo" :placeholder="isOutsource ? '请选择外包查勘员' : '请选择查勘员'"
                    class="modern-select">
                    <el-option v-for="surveyor in surveyorOptions" :key="surveyor.workNo"
                      :label="`${surveyor.realName} (${surveyor.workNo})`" :value="surveyor.workNo">
                      <div class="surveyor-option">
                        <div class="surveyor-info">
                          <div class="surveyor-name">{{ surveyor.realName }}
                            ({{ surveyor.workNo }})
                          </div>
                        </div>
                      </div>
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 备注信息 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon>
                <Edit />
              </el-icon>
              <span>备注信息</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="调度备注">
                  <el-input v-model="assignForm.dispatchRemark" type="textarea" :rows="4"
                    placeholder="请输入调度备注（如特殊查勘要求、标的特征说明等）" class="modern-textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <div class="footer-left">
            <el-button @click="assignDialogVisible = false" size="large" class="cancel-btn">
              取消
            </el-button>
          </div>
          <div class="footer-right">
            <el-button type="primary" @click="handleAssignSubmit" :loading="assignLoading" size="large"
              class="submit-btn">
              <el-icon v-if="!assignLoading">
                <Check />
              </el-icon>
              {{ assignLoading ? '安排中...' : '确认安排' }}
            </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import hxxp from '@/utils/hxxp'

// 响应式数据
const loading = ref(false)
const assignLoading = ref(false)
const assignDialogVisible = ref(false)
const assignFormRef = ref()
const isOutsource = ref(false)


// 表格数据
const tableData = ref([])

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})


// 安排查勘员表单
const assignForm = reactive({
  reportId: '',
  policyId: '',
  dispatcherWorkNo: '', // 调度员工号
  surveyorWorkNo: '',
  surveyAddress: '',
  scheduledStartTime: '',
  dispatchRemark: '',
  dispatchStatus: 1, // 默认状态：1-待确认
  reportTime: '' // 报案时间，用于验证
})

// 查勘员选项
const surveyorOptions = ref([])

// 调度员选项
const dispatcherOptions = ref([])


// 时间格式化函数
const formatDateTime = (dateTime) => {
  if (!dateTime) return '--'
  const date = new Date(dateTime)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 自定义验证：计划时间不能早于报案时间
const validateScheduledTime = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请选择计划开始时间'))
    return
  }

  if (!assignForm.reportTime) {
    callback()
    return
  }

  const scheduledTime = new Date(value)
  const reportTime = new Date(assignForm.reportTime)

  if (scheduledTime <= reportTime) {
    callback(new Error('计划时间不能早于或等于报案时间'))
  } else {
    callback()
  }
}

// 表单验证规则
const assignRules = {
  dispatcherWorkNo: [
    { required: true, message: '请选择调度员', trigger: 'change' }
  ],
  surveyorWorkNo: [
    { required: true, message: '请选择查勘员', trigger: 'change' }
  ],
  surveyAddress: [
    { required: true, message: '请输入查勘地点', trigger: 'blur' }
  ],
  scheduledStartTime: [
    { required: true, message: '请选择计划开始时间', trigger: 'change' },
    { validator: validateScheduledTime, trigger: 'change' }
  ]
}




// 获取任务列表
const getTaskList = async () => {
  loading.value = true
  try {
    const params = {
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize,
    }

    const response = await hxxp.get('/aiClaimReport/dispatch', { params })
    console.log(response);

    if (response.code === 100200) {
      tableData.value = response.data.list || []
      pagination.total = response.data.total || 0
      pagination.currentPage = response.data.pageNum || 1
      pagination.pageSize = response.data.pageSize || 10

      // 更新统计数据
      // updateStats()
    } else {
      ElMessage.error(response.message || '获取数据失败')
    }
  } catch (error) {
    console.error('获取任务列表失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 刷新
const handleRefresh = () => {
  getTaskList()
}

// 获取查勘员列表
const getSurveyorList = async () => {
  try {
    const response = await hxxp.get('/aiStaffUser/worker', {
      params: {
        positionCode: 'PTN003'
      }
    })
    if (response.code === 100200) {
      surveyorOptions.value = response.data || []
    }
  } catch (error) {
    console.error('获取查勘员列表失败:', error)
  }
}

// 获取调度员列表
const getDispatcherList = async () => {
  try {
    const response = await hxxp.get('/aiStaffUser/worker', {
      params: {
        positionCode: 'PTN002'
      }
    })
    if (response.code === 100200) {
      dispatcherOptions.value = response.data || []
    }
  } catch (error) {
    console.error('获取调度员列表失败:', error)
  }
}


// 安排查勘员（支持外包）
const handleAssign = (row, outsource = false) => {
  isOutsource.value = !!outsource
  Object.assign(assignForm, {
    reportId: row.reportNo,
    policyId: row.policyId,
    dispatcherWorkNo: '', // 重置调度员选择
    surveyorWorkNo: '',
    surveyAddress: row.disasterLocation || '',
    scheduledStartTime: '',
    dispatchRemark: '',
    dispatchStatus: 1, // 新增记录，状态为待确认
    reportTime: row.reportTime || '' // 设置报案时间用于验证
  })
  assignDialogVisible.value = true
  // 根据类型加载不同的查勘员列表
  if (isOutsource.value) {
    getOutSurveyorList()
  } else {
    getSurveyorList()
  }
}

// 安排查勘员提交
const handleAssignSubmit = async () => {
  if (!assignFormRef.value) return

  try {
    await assignFormRef.value.validate()
    assignLoading.value = true

    // 构建新增调度的数据
    const dispatchData = {
      reportId: assignForm.reportId,
      policyId: assignForm.policyId,
      dispatcherWorkNo: assignForm.dispatcherWorkNo,
      surveyorWorkNo: assignForm.surveyorWorkNo,
      surveyAddress: assignForm.surveyAddress,
      scheduledStartTime: assignForm.scheduledStartTime ? new Date(assignForm.scheduledStartTime).toISOString() : null,
      dispatchRemark: assignForm.dispatchRemark,
      dispatchStatus: assignForm.dispatchStatus,
      reportStatus: 2,
      workOutStatus: isOutsource.value ? 1 : 0,
      dispatchTime: new Date().toISOString() // 调度创建时间
    }


    const response = await hxxp.post('/aiClaimDispatch', dispatchData)

    if (response.code === 100200) {
      ElMessage.success('查勘员安排成功')
      assignDialogVisible.value = false
      getTaskList()
    } else {
      ElMessage.error(response.message || '安排失败')
    }
  } catch (error) {
    if (error !== false) {
      console.error('安排查勘员失败:', error)
      ElMessage.error('操作失败，请稍后重试')
    }
  } finally {
    assignLoading.value = false
  }
}


// 分页大小变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.currentPage = 1
  getTaskList()
}

// 当前页变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  getTaskList()
}

// 组件挂载时获取数据
onMounted(() => {
  getTaskList()
  getSurveyorList()
  getDispatcherList()
})

// 获取外包查勘员列表
const getOutSurveyorList = async () => {
  surveyorOptions.value = []
  const tryRequests = [
    () => hxxp.get('/aiStaffUser/worker', { params: { positionCode: 'WB001' } }),
  ]

  for (const request of tryRequests) {
    try {
      const res = await request()
      if (res && res.code === 100200 && Array.isArray(res.data)) {
        surveyorOptions.value = res.data
        return
      }
    } catch (e) {
      // 继续尝试下一个候选
    }
  }

  // 若全部失败，提示但不中断流程
  console.error('未能通过预设方式获取到外包查勘员列表')
}
</script>

<style scoped>
/* 主容器 */
.dispatch-task-container {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 120px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 页面头部 */
.page-header {
  margin-bottom: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 32px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="1" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.1;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.page-subtitle {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
  font-weight: 400;
}

.header-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 500;
}

/* 任务列表区域 */
.task-section {
  margin-bottom: 32px;
}

.main-card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: none;
  overflow: hidden;
  background: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 16px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

/* 表格容器 */
.table-container {
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.modern-table {
  border-radius: 12px;
  overflow: hidden;
}

.modern-table :deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modern-table :deep(.el-table__header th) {
  background: transparent;
  color: #495057;
  font-weight: 600;
  font-size: 14px;
  padding: 16px 12px;
  border-bottom: 2px solid #dee2e6;
}

.modern-table :deep(.el-table__body tr) {
  transition: all 0.3s ease;
}

.modern-table :deep(.el-table__body tr:hover) {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  transform: scale(1.01);
}

.modern-table :deep(.el-table__body td) {
  padding: 16px 12px;
  border-bottom: 1px solid #f1f3f4;
}

/* 表格内容样式 */
/* .policy-id {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    color: #6c757d;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
} */

.address-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.location-icon {
  color: #667eea;
  font-size: 16px;
}

.time-text {
  font-size: 13px;
  color: #6c757d;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.assign-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border: none;
  color: white;
}

.assign-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
}

/* 分页 */
.pagination-section {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.modern-pagination :deep(.el-pagination) {
  background: #f8f9fa;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.modern-pagination :deep(.el-pager li) {
  border-radius: 8px;
  margin: 0 4px;
  transition: all 0.3s ease;
}

.modern-pagination :deep(.el-pager li:hover) {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

.modern-pagination :deep(.btn-prev),
.modern-pagination :deep(.btn-next) {
  border-radius: 8px;
  margin: 0 4px;
  transition: all 0.3s ease;
}

.modern-pagination :deep(.btn-prev:hover),
.modern-pagination :deep(.btn-next:hover) {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

/* 对话框样式 */
.assign-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.15);
}

.assign-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
  margin: 0;
  border-bottom: none;
}

.assign-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.assign-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 20px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dialog-icon {
  font-size: 24px;
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
}

/* 对话框内容 */
.dialog-content {
  padding: 32px 24px;
  background: #fafbfc;
}

.assign-form {
  max-width: none;
}

.form-section {
  margin-bottom: 32px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f3f4;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  padding-bottom: 12px;
  border-bottom: 2px solid #e9ecef;
}

.section-title .el-icon {
  color: #667eea;
  font-size: 18px;
}

/* 表单样式 */
.disabled-input :deep(.el-input__inner) {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

.modern-input :deep(.el-input__inner) {
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  padding: 12px 16px;
}

.modern-input :deep(.el-input__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modern-select :deep(.el-input__inner) {
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  padding: 12px 16px;
}

.modern-select :deep(.el-input__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modern-datepicker {
  width: 100%;
}

.modern-datepicker :deep(.el-input__inner) {
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  padding: 12px 16px;
}

.modern-datepicker :deep(.el-input__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.modern-textarea :deep(.el-textarea__inner) {
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  padding: 12px 16px;
  resize: vertical;
}

.modern-textarea :deep(.el-textarea__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 查勘员选项样式 */
.surveyor-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.surveyor-avatar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

.surveyor-info {
  flex: 1;
}

.surveyor-name {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 2px;
}

.surveyor-workno {
  font-size: 12px;
  color: #6c757d;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.cancel-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  border: 2px solid #e9ecef;
  color: #6c757d;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  border-color: #dc3545;
  color: #dc3545;
  background: #fff5f5;
}

.submit-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border: none;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
}

/* 标签样式 */
:deep(.el-tag) {
  border-radius: 6px;
  font-weight: 500;
  border: none;
}

:deep(.el-tag--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* :deep(.el-tag--warning) {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  color: white;
} */

/* :deep(.el-tag--info) {
  background: linear-gradient(135deg, #17a2b8 0%, #6f42c1 100%);
  color: white;
} */

/* 响应式设计 */
@media (max-width: 1200px) {
  .dispatch-task-container {
    padding: 16px;
  }

  .page-header {
    padding: 24px;
  }

  .page-title {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .dispatch-task-container {
    padding: 12px;
  }

  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .page-title {
    font-size: 24px;
  }

  .header-stats {
    justify-content: center;
  }

  .card-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-left {
    justify-content: center;
  }

  .dialog-content {
    padding: 20px 16px;
  }

  .form-section {
    padding: 16px;
    margin-bottom: 20px;
  }

  .dialog-footer {
    flex-direction: column;
    gap: 12px;
  }

  .footer-left,
  .footer-right {
    width: 100%;
  }

  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px;
    margin-bottom: 20px;
  }

  .page-title {
    font-size: 20px;
  }

  .title-icon {
    font-size: 24px;
  }

  .stat-item {
    padding: 12px;
  }

  .stat-number {
    font-size: 24px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-card {
  animation: fadeInUp 0.6s ease-out;
}

.form-section {
  animation: fadeInUp 0.6s ease-out;
}

.form-section:nth-child(2) {
  animation-delay: 0.1s;
}

.form-section:nth-child(3) {
  animation-delay: 0.2s;
}

.form-section:nth-child(4) {
  animation-delay: 0.3s;
}

/* 加载状态优化 */
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
}

/* 滚动条样式 */
:deep(.el-scrollbar__bar.is-vertical) {
  right: 2px;
  width: 6px;
}

:deep(.el-scrollbar__thumb) {
  background: #c1c1c1;
  border-radius: 3px;
}

:deep(.el-scrollbar__thumb:hover) {
  background: #a8a8a8;
}

/* Tooltip 样式优化 */
:deep(.el-tooltip__popper) {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  max-width: 300px;
  word-wrap: break-word;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:deep(.el-tooltip__popper.is-dark) {
  background: rgba(0, 0, 0, 0.8);
}

:deep(.el-tooltip__popper .el-popper__arrow::before) {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
}
</style>
